<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="orders by dede58.com"/>
    <title>知识付费系统 - 首页</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- markdown文本的解析器 -->
    <script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="editor.md-master/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />

    <script src="editor.md-master/examples/js/jquery.min.js"></script>
    <script src="editor.md-master/editormd.min.js"></script>
    <script src="editor.md-master/lib/marked.min.js"></script>
    <script src="editor.md-master/lib/prettify.min.js"></script>
    <script src="editor.md-master/lib/raphael.min.js"></script>
    <script src="editor.md-master/lib/underscore.min.js"></script>
    <script src="editor.md-master/lib/sequence-diagram.min.js"></script>
    <script src="editor.md-master/lib/flowchart.min.js"></script>
    <script src="editor.md-master/lib/jquery.flowchart.min.js"></script>

    <script src="editor.md-master/editormd.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div id="app">

    <!-- start header -->
    <header>
        <div class="top center">
            <div class="left fl">
                <ul>
                    <li>
                        <!-- 这里直接去首页 -->
                        <b>
                            <a href="index.html" target="_self">基于Spring Cloud的知识付费系统</a>
                        </b>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="right fr">
                <div v-if="username.length == 0" style="color: #cccccc">
                    <a href="login.html" style="color: #eeeeee" target="_self">登录</a>
                    &nbsp;&nbsp; | &nbsp;&nbsp;
                    <a href="register.html" style="color: #eeeeee" target="_self">注册</a>
                </div>
                <div v-if="username.length > 0" style="color: #cccccc">
                    <a v-if="userType == 2" href="topicAdmin.html" style="color: #eeeeee">
                        <img v-bind:src="headimg" style="width: 25px;height: 25px;border-radius:50%;">
                        &nbsp;&nbsp;{{username}}
                    </a>
                    <a v-if="userType != 2" href="#" v-on:click="setSelfUserId(loginUserId)" style="color: #eeeeee">
                        <img v-bind:src="headimg" style="width: 25px;height: 25px;border-radius:50%;">
                        &nbsp;&nbsp;{{username}}
                    </a>
                    &nbsp;&nbsp; | &nbsp;&nbsp;
                    <a href="editArticle.html" style="color: #eeeeee" target="_self">立即发帖</a>
                    &nbsp;&nbsp; | &nbsp;&nbsp;
                    <a v-on:click="loginOut" href="#" style="color: #eeeeee">注销</a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </header>
    <!--end header -->

    <br>
    <br>
    <center>
        <h2>{{topic.title}}</h2>
        <hr width="70%">
    </center>
    <br>

    <center v-if="topicList != null">
        <table id="showTopic" class="table table-hover" style="width: 70%;margin-top: 15px;">
            <thead>
            <tr>
                <th style="text-align: center" v-on:click="setSelfUserId(topic.userId)" colspan="2">
                    <span style="font-size: 20px;color: #101010;">作者：</span>
                    <img v-bind:src="topic.userImg" style="width: 30px;height: 30px;border-radius:50%;border: 2px solid burlywood;">
                    <a href="#" style="font-size: 20px;color: #101010;">{{topic.userName}}</a>
                </th>
            </tr>
            </thead>
            <tbody>
                <tr class="active" style="line-height: 1.8">
                    <td align="left" colspan="2">
                        <span style="font-size: 18px;">
                            <!-- 展示帖子内容 -->
                            <div id="resultContent"></div>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="font-size: 20px">
                            <a href="#" style="color: gray">阅读量({{topic.visitNum}})&nbsp;&nbsp;</a>
                            <a href="#" data-toggle="modal" data-target="#myModal" style="color: gray">评论({{topic.commentNum}})&nbsp;&nbsp;</a>
                            <!-- status不为0则说明已点赞, 需要进行取消点赞操作 -->
                            <a v-if="likeStatus != 0" href="#" v-on:click="likeTopicById(topic.id, 0)" style="color: gray">已点赞({{topic.likeNum}})&nbsp;&nbsp;</a>
                            <a v-if="likeStatus == 0" href="#" v-on:click="likeTopicById(topic.id, 1)" style="color: gray">点赞({{topic.likeNum}})&nbsp;&nbsp;</a>

                            <a v-if="collectStatus != 0" v-on:click="collectTopicById(topic.id, 0)"  href="#" style="color: gray">已收藏({{topic.collectNum}})</a>
                            <a v-if="collectStatus == 0" v-on:click="collectTopicById(topic.id, 1)"  href="#" style="color: gray">收藏({{topic.collectNum}})</a>
                        </span>
                    </td>
                    <td align="right">
                        <span style="font-size: 20px;">
                            创建于:
                        </span>
                        <span style="font-size: 20px;">
                            {{topic.created}}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>

    </center>

    <center>
        <hr width="70%">
    </center>

    <div v-if="commentList.length > 0">
        <center>
            <h3><b>评论区</b></h3>
            <hr width="70%">
            <table id="showComment" class="table table-hover" style="width: 70%;margin-top: 15px;">
                <tbody>
                <tr v-for="(comment,index) in commentList" class="active">
                    <td width="20%">
                        <a href="#" v-on:click="setSelfUserId(comment.kpfTopicComment.userId)">
                            <img v-bind:src="comment.headimg" style="width: 25px;height: 25px;border-radius:50%;border: 2px solid burlywood;">
                            {{comment.username}}
                        </a>
                        &nbsp;：&nbsp;
                        {{comment.kpfTopicComment.commentContent}}
                    </td>
                </tr>
                </tbody>
            </table>
            <tr>
                <!-- 分页组件 -->
                <div class="page" style="text-align: center">
                    <a style="color: blue;cursor: pointer" @click="prePage">
                        上一页
                    </a>
                    &nbsp;&nbsp;
                    <font style="color: black;">第{{pageNum}}页 / 共{{total}}页&nbsp;&nbsp;</font>
                    <a style="color: blue;cursor: pointer" @click="nextPage">
                        下一页
                    </a>
                </div>
                <!--<button @click="submitOrder" type="button" class="btn btn-primary">提交订单</button>-->
            </tr>
        </center>
    </div>
    <br>
    <br>
    <br>

    <!-- 模态框（Modal） -->
    <div style="margin-top: 200px" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        <b>发表评论</b>
                    </h4>
                </div>
                <div class="modal-body">
                    <textarea id="commentContent" style="width: 470px; height: 170px;font-size: 18px"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" v-on:click="commentTopic(topic.id)" class="btn btn-primary">
                        发布评论
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <br>
    <br>
    <div style="bottom: 0px;background: #212529;width: 100%;height: 40px;position: fixed"></div>

</div>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/topicDetail.js"></script>

</body>
</html>